/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */
import camelCase from 'camelcase';
import _map from 'lodash/map';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Alert, Image } from 'react-native';
import { Divider, Utils, TYFlatList, Popup, TopBar } from 'tuya-panel-kit';
import TYSdk from '../../api';
import Strings from '../../i18n';
import Res from '../../res';



class VideoListScene extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showTop: true,
    };
  }

  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action size={20} source={Res.fback} color="#4C4C4C" onPress={() => TYSdk.Navigator.pop()} />
        <TopBar.Content />
      </TopBar.Container>
    );
  }
  
  render() {
    const { showTop } = this.state;
    return (

      <View style={styles.container}>
        { showTop ? this.topView() : null }
        {/* 新手引导视频 */}
        <View style={{ backgroundColor: '#FFFFFF', height: 100, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text style={{ marginStart: 30, fontSize: 30, color: '#333333' }}>{Strings.page_title_use_guide}</Text>
        </View>

        <TYFlatList
          style={{
            alignSelf: 'stretch',
            backgroundColor: '#f5f5f5',
            height: 280,
          }}
          separatorStyle={{ backgroundColor: '#FFFFFF' }}
          scrollEnabled={false}
          data={data}
        />

      </View>
    );
  }

}



let data = [
  {
    key: 0,
    title: Strings.list_item_use_guide_title_0,//'外观及配件展示',
    arrow: true,
    onActionPress: () => {
      TYSdk.Navigator.push({
        id: 'showVideo',
        // 缺传参
      });
    },
    // styles: { content: { marginStart: 20, marginEnd: 40 } },
  },
  {
    key: 1,
    title: Strings.list_item_use_guide_title_1,//'安装及使用功能展示',
    arrow: true,
  },
  {
    key: 2,
    title: Strings.list_item_use_guide_title_2,//'APP 连接与使用',
    arrow: true,
  },
  {
    key: 3,
    title: Strings.list_item_use_guide_title_3,//'日常维护',
    arrow: true,
  },
  {
    key: 4,
    title: Strings.list_item_use_guide_title_4,//'故障排除',
    arrow: true,
  },
  {
    key: 5,
    title: Strings.list_item_use_guide_title_5,//'养鱼知识卡片',
    arrow: true,
  },
  {
    key: 6,
    title: Strings.list_item_use_guide_title_6,//'软件功能演示',
    arrow: true,
  }

];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    height: 1200,
  },


});

export default VideoListScene;
